<template>
  <div class="row">
    <div class="col-md-12">
      <Table
        title="桥梁列表"
        :pageData="pageData"
        searchHint="输入桥梁名称,进行查询"
        :canAdd="false"
        @search="handleSearch">
        <!--按钮组-->
        <template slot="buttonArea">
          <el-button v-if="canAdd" class="btn btn-default" @click="handleAdd()"><i class="fa fa-plus"></i>&nbsp;&nbsp;新增
          </el-button>
          <!--导入导出按钮组-->
          <div class="btn-group">
            <el-tooltip v-if="canImport" content="上传桥梁表" placement="top">
              <button type="button" class="btn btn-default btn-flat" @click="handleUpload()"><i
                class="fa fa-upload"></i></button>
            </el-tooltip>
            <el-tooltip v-if="canImport" content="上传模板下载" placement="top">
              <button type="button" class="btn btn-default btn-flat" @click="handleDownloadTemplate()"><i
                class="fa fa-file-text"></i></button>
            </el-tooltip>
            <!--<el-tooltip v-if="canExport" content="下载桥梁表" placement="top">-->
            <!--<button type="button" class="btn btn-default btn-flat"><i class="fa fa-download"></i></button>-->
            <!--</el-tooltip>-->
          </div>
          <!--&lt;!&ndash;扩展的按钮组&ndash;&gt;-->
          <!--<div class="btn-group">-->
          <!--<el-tooltip v-if="canEdit" content="批量改线" placement="top">-->
          <!--<button type="button" class="btn btn-default btn-flat"><i class="fa fa-pencil-square-o"></i></button>-->
          <!--</el-tooltip>-->
          <!--</div>-->
        </template>

        <!--索引列-->
        <el-table-column type="index" align="center" width="80px"></el-table-column>
        <!--表格主体内容-->
        <el-table-column v-for="col of columns"
                         align="center"
                         :key="col.prop"
                         :prop="col.prop"
                         :label="col.label"
                         :width="col.width"
                         :sortable="col.sortable">
        </el-table-column>
        <!--可筛选列-->
        <el-table-column align="center"
                         prop="bridgeCategoryName"
                         column-key="bridgeCategoryId"
                         label="桥梁分类"
                         width="150"
                         :filters="bridgeCategoryFilters"
                         filter-placement="bottom">
        </el-table-column>
        <!--操作列-->
        <el-table-column v-if="canEdit || canCopy || canDelete" label="操作" align="center" width="250">
          <template slot-scope="scope">
            <el-button v-if="canEdit" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button v-if="canCopy" size="mini" @click="handleCopy(scope.row)">复制</el-button>
            <el-button v-if="canCopy" size="mini" @click="handleJump(scope.row)">力学分析</el-button>
            <el-button v-if="canDelete" size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </Table>

      <!--  新增、编辑及复制对话框  -->
      <el-dialog v-if="canEdit && canCopy && canDelete" :title="updateDialogTitle" :visible.sync="isUpdateDialogVisible"
                 size="small" v-model="isUpdateDialogVisible" :close-on-click-modal="closeOnClickModal">
        <!-- 表单 -->
        <el-form :model="form" :rules="rules" ref="form" label-width="100px">
          <h3 style="margin-bottom: 20px;">行政识别数据</h3>
          <!--行政识别数据1-3-->
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="路线编号" prop="roadNoId">
                <el-select v-model="form.roadNoId" style="width: 100%;" placeholder="请选择路线编号" filterable>
                  <el-option v-for="item of roadNoList" :key="item.id" :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="路线名称">
                <el-input v-model="form.roadName" placeholder="输入路线名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="路线等级">
                <el-select v-model="form.roadLevelName" style="width: 100%;" placeholder="请选择路线等级" filterable clearable>
                  <el-option v-for="item of roadLevelList" :key="item.id" :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!--行政识别4-6-->
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="桥梁名称" prop="name">
                <el-input v-model="form.name" placeholder="输入桥梁名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所在地" prop="fullAddressName">
                <el-input v-model="form.fullAddressName" placeholder="输入桥梁所在地"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="管养单位" prop="unitsName">
                <el-input v-model="form.unitsName" placeholder="输入管养单位"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!--行政识别数据7-9-->
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="功能类型">
                <el-select v-model="form.functionTypeName" style="width: 100%;" placeholder="请选择功能类型" filterable
                           clearable>
                  <el-option v-for="item of functionTypeList" :key="item.id" :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="下穿通道名">
                <el-input v-model="form.dncrossName" placeholder="请输入下穿通道名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="下穿通道桩号">
                <el-input v-model="form.dncrossStakeNo" placeholder="请输入下穿通道桩号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!--行政识别数据10-12-->
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="设计荷载" placeholder="请选择设计荷载">
                <el-select v-model="form.designLoadName" style="width: 100%;" placeholder="请选择设计荷载" filterable clearable>
                  <el-option v-for="item of designLoadList" :key="item.id" :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="通行载重">
                <el-select v-model="form.loadCapacityName" style="width: 100%;" placeholder="请选择通行载重" filterable
                           clearable>
                  <el-option v-for="item of loadCapacityList" :key="item.id" :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="弯斜坡度">
                <el-input v-model="form.slop" placeholder="请输入弯斜坡度"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!--行政识别数据13-15-->
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="桥梁分类">
                <el-select v-model="form.bridgeCategoryName" style="width: 100%;" placeholder="请选择桥梁分类" filterable
                           clearable>
                  <el-option v-for="item of bridgeCategoryList" :key="item.id" :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="跨越地物类型">
                <el-select v-model="form.crossTypeName" style="width: 100%;" placeholder="请选择跨越地物类型" filterable clearable>
                  <el-option v-for="item of crossTypeList" :key="item.id" :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="建成年限">
                <el-date-picker v-model="form.buildDate" style="width: 100%;" :editable="false"
                                placeholder="选择桥梁建成年限"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <!--最后两个，经纬度-->
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="经度">
                <el-input type="number" v-model.number="form.longitude" placeholder="请输入经度"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="纬度">
                <el-input type="number" v-model.number="form.latitude" placeholder="请输入纬度"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!--结构技术数据-->
          <h3 style="margin-bottom: 20px">结构技术数据</h3>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="常水位">
                <el-input v-model="form.normalWaterLevel" placeholder="请输入常水位"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设计水位">
                <el-input v-model="form.designWaterLevel" placeholder="输入设计水位"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="历史洪水位">
                <el-input v-model="form.historyFloodLevel" placeholder="输入历史洪水位"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="加速度系数">
                <el-input type="number" v-model.number="form.accelerationFactor" placeholder="请输入地震动峰值加速度系数"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="护墩体">
                <el-input v-model="form.pierProtector" placeholder="请输入护墩体"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="桥面分离形式">
                <el-select v-model="form.deckDivideTypeName" style="width: 100%;" placeholder="请选择桥面分离形式" filterable>
                  <el-option v-for="item of deckDivideTypeList" :key="item.key" :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 表单操作 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="isUpdateDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="update" :loading="isUpdating">确 定</el-button>
        </div>
      </el-dialog>

      <!--删除确认对话框-->
      <el-dialog title="确定删除？" size="tiny" :visible.sync="isDeleteDialogVisible" v-model="isDeleteDialogVisible">
        <label class="el-form-item__label">删除原因：</label>
        <el-select v-model="deleteStatusId" placeholder="选择删除类型" filterable>
          <el-option v-for="item of deleteStatusList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isDeleteDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="doDelete" :loading="isDeleting">确 定</el-button>
        </div>
      </el-dialog>

      <!--上传文件对话框-->
      <el-dialog title="上传桥梁表" size="tiny" v-model="isUploadDialogVisible">
        <el-card :body-style="{background:'#f9fafc'}">
          <!--进度控制-->
          <div slot="header">
            <el-steps :active="uploadStep" align-center center>
              <el-step title="上传文件" icon="upload"></el-step>
              <el-step title="校验文件" :status="checkStatus" icon="search"></el-step>
              <el-step title="上传成功" icon="check"></el-step>
            </el-steps>
          </div>
          <!--进度1，上传文件-->
          <el-upload
            v-if="uploadStep === 1"
            style="width: 100%;"
            :action="uploadUrl"
            ref="upload"
            accept=".xlsx,.xls"
            :data="uploadParam"
            :auto-upload="false"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :file-list="fileList"
            multiple drag>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传.xlsx/.xls表格文件，单个文件不超过10MB</div>
          </el-upload>
          <!--进度2，文件校验信息-->
          <div v-if="uploadStep === 2" style="min-height: 200px">
            <div v-for="item of checkResults" :style="{color:(item.status === 'SUCCESS'?'#13ce66':'red')}">
              <p v-if="!!item.title"><em>{{item.text}}</em></p>
              <p v-else style="margin-left:2em;">{{item.text}}</p>
            </div>
          </div>
          <!--进度3， 上传成功的结果反馈-->
          <div v-if="uploadStep === 3" style="min-height: 200px;">
            <div v-for="item of checkResults" style="color: #13ce66;">
              <p v-if="!!item.title"><em>{{item.text}}</em></p>
              <p v-else style="margin-left: 2em;">{{item.text}}</p>
            </div>
          </div>
        </el-card>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isUploadDialogVisible=false">取消</el-button>
          <el-button type="primary" @click="doUpload" :loading="loadingCheckResult">{{uploadStep >= 2?"完成":"开始"}}
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import Table from "../bridge/Table.vue"
  import {doGet, doPost, doDelete} from "../../../assets/js/utils/RequestUtils"
  import {COMPLETE, LOADING} from "../../../store/mutationTypes"
  import {hasAuthorizedFunction, getAuthorizedFunction} from "../../../assets/js/global"
  import {ADD, EDIT, COPY, DELETE, IMPORT, EXPORT} from "../../../assets/js/enum/FunctionType"
  import {treeOf, parentArrayOf} from "../../../assets/js/utils/TreeUtils"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils";
  import {dateValidator} from "../../../assets/js/utils/ValidateUtils"
  import {CONTEXT_PATH} from "../../../assets/js/global"

  const DATA_URL = "/bridge/bridge/getBridgePageData",
    ADD_URL = "/bridge/bridge/add",
    EDIT_URL = "/bridge/bridge/edit",
    DELETE_URL = "/bridge/bridge/deleteBridge",
    UPLOAD_URL = CONTEXT_PATH + "/bridge/bridge/uploadBridgeFile",
    DOWNLOAD_TEMPLATE = CONTEXT_PATH + "/bridge/bridge/downloadTemplate",
    DUPLICATION_CHECK_URL = "/bridge/bridge/isBridgeExists",
    ROAD_NO_URL = "/bridge/bridge/getRoadNoList",
    ROAD_LEVEL_URL = "/bridge/bridge/getRoadLevelList",
    // ADDRESS_URL = "/bridge/bridge/getAddressList",
    // UNITS_URL = "/bridge/bridge/getUnitsList",
    FUNCTION_TYPE_URL = "/bridge/bridge/getFunctionTypeList",
    DESIGN_LOAD_URL = "/bridge/bridge/getDesignLoadList",
    LOAD_CAPACITY_URL = "/bridge/bridge/getLoadCapacityList",
    BRIDGE_CATEGORY_URL = "/bridge/bridge/getBridgeCategoryList",
    CROSS_TYPE_URL = "/bridge/bridge/getCrossTypeList",
    DECK_DIVIDE_TYPE_URL = "/bridge/bridge/getDeckDivideTypeList",
    DELETE_STATUS_URL = "/bridge/bridge/getDeleteStatusList";


  let oldName = "";

  const bridgeForm = "form";

  export default {
    name: "BridgeManagement",
    data() {
      let nameValidator = (rule, value, callback) => {
        if (value === oldName) {
          callback();
        } else {
          doGet(DUPLICATION_CHECK_URL, {
            data: {
              roadNoId: this.form.roadNoId,
              name: this.form.name,
              fullAddressName: this.form.fullAddressName
            },
            component: this
          })
            .then(response => {
              if (response) {
                callback(new Error("桥梁重复"));
              } else {
                callback();
              }
            });
        }
      };

      return {
        pageData: {
          data: [],
          pageSize: 10,
          total: 0,
          currentPage: 1,
        },
        columns: [
          {prop: "name", label: "桥名", width: "180"},
          {prop: "roadNo", label: "路线号", sortable: "custom", width: "150"},
          {prop: "fullAddressName", label: "所在地"},
          {prop: "superstructureTypeName", label: "上部结构类型"},
          {prop: "unitsName", label: "管养单位"}
        ],
        form: {
          roadNoId: "",
          roadName: "",
          roadLevelId: "",
          name: "",
          fullAddressName: "",
          unitsName: "",
          functionTypeId: "",
          dncrossName: "",
          dncrossStakeNo: "",
          designLoadId: "",
          loadCapacityId: "",
          slop: "",
          bridgeCategoryId: "",
          crossTypeId: "",
          buildDate: "",
          longitude: "",
          latitude: "",
          normalWaterLevel: "",
          designWaterLevel: "",
          historyFloodLevel: "",
          accelerationFactor: "",
          pierProtector: "",
          deckDivideTypeId: ""
        },
        rules: {
          roadNoId: [
            {required: true, message: "请输入路线编号", trigger: "blur"}
          ],
          name: [
            {required: true, message: "请输入桥名", trigger: "blur"},
            {validator: nameValidator, trigger: "blur"}
          ],
          addressIds: [
            {required: true, type: "array", message: "请选择桥梁所在地", trigger: "blur"}
          ],
          unitsIds: [
            {required: true, type: "array", message: "请选择管养单位", trigger: "blur"}
          ]
        },
        //根据搜索框输入的内容自动分割
        searchValues: "",
        sortProp: "",
        order: "",
        closeOnClickModal: false,
        isUpdateDialogVisible: false,
        updateType: "",
        isUpdating: false,
        roadNoList: [],
        roadLevelList: [],
        functionTypeList: [],
        designLoadList: [],
        loadCapacityList: [],
        bridgeCategoryList: [],
        crossTypeList: [],
        deckDivideTypeList: [],
        cascadeProps: {
          label: "name",
          value: "id"
        },
        deleteData: {},
        deleteStatusList: [],
        deleteStatusId: "",
        isDeleteDialogVisible: false,
        isDeleting: false,
        filter: {prop: "", values: []},
        uploadUrl: UPLOAD_URL,
        isUploadDialogVisible: false,
        uploadStep: 1,
        uploadParam: {
          tokenId: localStorage.getItem("tokenId"),
          menuFunctionId: getAuthorizedFunction(this, IMPORT)
        },
        fileList: [],
        checkResults: [],
        loadingCheckResult: false,
        checkStatus: ""
      }
    },
    computed: {
      updateDialogTitle() {
        switch (this.updateType) {
          case ADD:
            return "新增";
          case EDIT:
            return "编辑";
          case COPY:
            return "复制";
          default:
            return "新增"
        }
      },
      bridgeCategoryFilters() {
        return this.bridgeCategoryList.map(item => {
          return {text: item.name, value: item.id};
        })
      },
      canAdd() {
        return hasAuthorizedFunction(this, ADD);
      },
      canCopy() {
        return hasAuthorizedFunction(this, COPY);
      },
      canEdit() {
        return hasAuthorizedFunction(this, EDIT);
      },
      canDelete() {
        return hasAuthorizedFunction(this, DELETE);
      },
      canImport() {
        return hasAuthorizedFunction(this, IMPORT);
      },
      canExport() {
        return hasAuthorizedFunction(this, EXPORT);
      }
    },
    methods: {
      handleSearch(value) {
        this.searchValues = value;
        this.fetchData();
      },
      handleAdd() {
        oldName = "";
        this.updateType = ADD;
        this.isUpdateDialogVisible = true;
        if (this.$refs[bridgeForm]) this.$refs[bridgeForm].resetFields();
        clearFields(this.form);
      },
      handleEdit(data) {
        oldName = data.name;
        this.updateType = EDIT;
        this.isUpdateDialogVisible = true;
        if (this.$refs[bridgeForm]) this.$refs[bridgeForm].resetFields();
        this.form = {...data};
      },
      handleCopy(data) {
        this.updateType = COPY;
        this.isUpdateDialogVisible = true;
        if (this.$refs[bridgeForm]) this.$refs[bridgeForm].resetFields();
        this.form = {...data, name: ""};
      },
      handleJump(data) {
        window.open("http://193.112.78.183:9000/Login/BimwinOutSide?ModelFileID=8acaa3da-e547-c1dc-6ae0-ca0b282d20ce", "_blank");
      },
      handleDelete(data) {
        this.deleteData = data;
        this.isDeleteDialogVisible = true;
      },
      handleDownloadTemplate() {
        window.location.href = DOWNLOAD_TEMPLATE + "?tokenId=" + localStorage.getItem("tokenId");
      },
      handleUpload() {
        this.uploadStep = 1;
        this.isUploadDialogVisible = true;
        this.checkStatus = "";
        if (this.$refs["upload"]) this.$refs["upload"].clearFiles();
      },
      //文件上传至服务器
      handleUploadSuccess(response, file, fileList) {
        if (response.status === "ERROR") {
          this.checkStatus = "error"
        }
        //上传反馈的标题
        this.checkResults.push({status: response.status, text: file.name + ":", title: true});
        //上传反馈的内容
        if (Array.isArray(response.content)) {
          this.checkResults.push(...response.content.map(item => {
            return {status: response.status, text: "    " + item};
          }));
        } else {
          this.checkResults.push({status: response.status, text: response.message});
        }
        if (file === fileList[fileList.length - 1]) {
          this.loadingCheckResult = false;
          this.uploadStep++;
          //如果没有错误，则再进一步
          if (!this.checkStatus) {
            this.uploadStep++;
          }
          this.fetchData();
        }
      },
      //处理上传失败的情况
      handleUploadError(err, file, fileList) {
        this.checkStatus = "error";
        //上传反馈的标题
        this.checkResults.push({status: "ERROR", text: file.name + ":", title: true});
        //上传反馈的内容
        this.checkResults.push({status: "ERROR", text: "文件上传失败，请检查网络及文件大小是否超限（单个文件<10MB）"});
        //初始化
        this.loadingCheckResult = false;
        this.uploadStep++;
        this.fetchData();
      },
      doUpload() {
        if (this.uploadStep >= 2) {
          this.isUploadDialogVisible = false;
        } else {
          this.$refs["upload"].submit();
          this.loadingCheckResult = true;
          this.checkResults = [];
        }
      },
      doDelete() {
        this.isDeleting = true;
        doDelete(DELETE_URL, {
          data: {
            id: this.deleteData.id,
            deleteStatusId: this.deleteStatusId
          },
          menuFunctionId: getAuthorizedFunction(this, DELETE),
          component: this
        })
          .then(response => {
            this.$message({message: response.message, type: response.status.toLowerCase()});
            this.fetchData();
          })
          .finally(() => {
            this.isDeleting = false;
            this.isDeleteDialogVisible = false;
          });
      },
      update() {
        let updateUrl = ADD_URL;
        if (this.updateType === EDIT) updateUrl = EDIT_URL;
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.isUpdating = true;
            doPost(updateUrl, {
              data: this.form,
              menuFunctionId: getAuthorizedFunction(this, this.updateType),
              component: this
            })
              .then(response => this.$message({message: response.message, type: response.status.toLowerCase()}))
              .finally(() => {
                this.isUpdating = false;
                this.isUpdateDialogVisible = false;
                this.fetchData();
              })
          }
        })
      },
      fetchData() {
        this.$store.commit(LOADING);
        doGet(DATA_URL, {
          data: {
            pageSize: this.pageData.pageSize,
            currentPage: this.pageData.currentPage,
            name: this.searchValues
          },
          component: this
        })
          .then(response => this.pageData = response)
          .finally(() => this.$store.commit(COMPLETE))
      },
      fetchDataByUrl(url) {
        return doGet(url, {component: this});
      },
      //获取下拉选项数据
      fetchSelectorData() {
        this.fetchDataByUrl(ROAD_NO_URL).then(response => this.roadNoList = response);
        this.fetchDataByUrl(ROAD_LEVEL_URL).then(response => this.roadLevelList = response);
        this.fetchDataByUrl(FUNCTION_TYPE_URL).then(response => this.functionTypeList = response);
        this.fetchDataByUrl(DESIGN_LOAD_URL).then(response => this.designLoadList = response);
        this.fetchDataByUrl(LOAD_CAPACITY_URL).then(response => this.loadCapacityList = response);
        this.fetchDataByUrl(BRIDGE_CATEGORY_URL).then(response => this.bridgeCategoryList = response);
        this.fetchDataByUrl(CROSS_TYPE_URL).then(response => this.crossTypeList = response);
        this.fetchDataByUrl(DECK_DIVIDE_TYPE_URL).then(response => this.deckDivideTypeList = response);
        this.fetchDataByUrl(DELETE_STATUS_URL).then(response => {
          this.deleteStatusList = response;
          this.deleteStatusId = this.deleteStatusList[0].id;
        });
      },
      treeOf
    },
    created() {
      this.fetchSelectorData();
      this.fetchData();
    },
    activated() {
      this.fetchData();
    },
    components: {Table}
  }
</script>

<style>
  .el-upload, .el-upload-dragger {
    width: 100% !important;
  }

  .el-upload__input {
    display: none !important;
  }
</style>


// WEBPACK FOOTER //
// BridgeManagement.vue?3322231b
